package com.example.composableexample.appbar

import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ExperimentalMotionApi
import androidx.constraintlayout.compose.MotionLayout
import androidx.constraintlayout.compose.MotionScene
import com.example.composableexample.R
import com.example.composableexample.ui.theme.ComposableExampleTheme

val backgroundColor = Color(0xff2c0723)
val colors = listOf(Color(0xff420433), Color(0xff6d0854))

data class Repo(
    val repoName: String,
    val repoDesc: String,
    val repoLanguage: String,
    val repoStars: Int,
)

@Composable
fun RepoItem(modifier: Modifier = Modifier, repo: Repo) {
    Column(modifier = modifier.padding(8.dp)) {
        Text(
            text = repo.repoName,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
            fontSize = 18.sp,
            fontWeight = FontWeight.ExtraBold,
            fontFamily = FontFamily.Monospace,
            color = Color.White
        )
        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = repo.repoDesc,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
            fontSize = 15.sp,
            fontWeight = FontWeight.ExtraLight,
            fontFamily = FontFamily.Monospace,
            color = Color.White
        )
        Spacer(modifier = Modifier.height(32.dp))

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = "",
                    tint = Color(0x80f0a9de)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = repo.repoStars.toString(),
                    fontFamily = FontFamily.Serif,
                    color = Color.White.copy(alpha = 0.8f),
                    fontStyle = FontStyle.Italic
                )
            }

            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    imageVector = Icons.Default.Build,
                    contentDescription = "",
                    tint = Color(0x80f0a9de)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = repo.repoLanguage,
                    fontFamily = FontFamily.Serif,
                    color = Color.White.copy(0.8f),
                    fontStyle = FontStyle.Italic
                )
            }
        }
    }
}

val repos = listOf(
    Repo(
        repoName = "repoName1",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 1
    ),
    Repo(
        repoName = "repoName6",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 6
    ),
    Repo(
        repoName = "repoName3",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 3
    ),
    Repo(
        repoName = "repoName10",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 10
    ),
    Repo(
        repoName = "repoName7",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 7
    ),
    Repo(
        repoName = "repoName9",
        repoDesc = "repoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDescrepoDesc",
        repoLanguage = "Kotlin",
        repoStars = 9
    )
).sortedByDescending { it.repoStars }


@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun RepoItemPreview() {
    ComposableExampleTheme {
        val lazyScrollState = rememberLazyListState()
        Scaffold(
            modifier = Modifier.fillMaxSize(),
            topBar = {
                MotionAppBar(lazyScrollState = lazyScrollState)
            }
        ) {
            LazyColumn(modifier = Modifier.padding(it)
                .fillMaxSize()
                .background(backgroundColor)
                .animateContentSize(),
                state = lazyScrollState
            ) {
                itemsIndexed(repos) { index, item ->
                    RepoItem(repo = item)
                    if (index != repos.lastIndex) {
                        Divider(modifier = Modifier.padding(8.dp))
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMotionApi::class)
@Composable
fun MotionAppBar(lazyScrollState: LazyListState) {
    val context = LocalContext.current
    val motionScene = remember {
        context.resources.openRawResource(R.raw.motion_scene).readBytes().decodeToString()
    }
    val progress by animateFloatAsState(
        targetValue = if (lazyScrollState.firstVisibleItemIndex in 0..4) 0f else 1f,
        tween(durationMillis = 500)
    )
    val motionHeight by animateDpAsState(
        targetValue = if (lazyScrollState.firstVisibleItemIndex in 0..4) 300.dp else 56.dp,
        tween(durationMillis = 500)
    )
    Column(modifier = Modifier.fillMaxWidth()) {
        MotionLayout(
            motionScene = MotionScene(content = motionScene),
            progress = progress,
            modifier = Modifier
                .fillMaxWidth()
                .background(backgroundColor)
                .height(motionHeight)
        ) {
            val boxProperties = motionProperties(id = "box")
            val roundedShape = RoundedCornerShape(
                bottomStart = boxProperties.value.int("roundValue").dp,
                bottomEnd = boxProperties.value.int("roundValue").dp
            )
            Box(
                modifier = Modifier
                    .layoutId("box")
                    .clip(roundedShape)
                    .background(
                        brush = Brush.verticalGradient(colors = colors, endY = 350f)
                    )
            )
            Image(
                painter = painterResource(id = R.drawable.bg1),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxSize()
                    .clip(roundedShape)
                    .layoutId("box_image")
            )
            Image(
                painter = painterResource(id = R.drawable.jetpack),
                contentDescription = "",
                modifier = Modifier
                    .layoutId("weapon_icon")
                    .background(
                        brush = Brush.radialGradient(
                            colors = listOf(Color.White, Color.Transparent)
                        )
                    )
            )
            Text(
                text = "Astro",
                fontSize = 24.sp,
                fontWeight = if (progress == 1f) FontWeight.Light else FontWeight.Bold,
                color = Color.White,
                modifier = Modifier.layoutId("user_name")
            )
            Image(
                painter = painterResource(id = R.drawable.head),
                contentDescription = "",
                modifier = Modifier
                    .clip(CircleShape)
                    .layoutId("user_image")
            )
        }
    }


}